<template>
    <view class="container paddingBottomBar" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="search-bar-box">
            <search-bar
                placeholderText="输入搜索的商品名称"
                :autoFocus="true"
                ref="searchBar"
                :lightStyle="true"
                :showSearchBtn="false"
                :actions="actions"
                @actionFn="actionFn"></search-bar>
        </view>
        <view class="main">
            <view v-if="showResult" class="reuslt">
                <product-list
                    :ref="'productList'"
                    :showCartBtn="showCartBtn"
                    :requestData="requestData"
                    :height="listHeight"
                    :isHideProImg="isHideProImg"
                    @sku="sku"
                    @amountProp="amountProp"
                    :displayData="displayData"
                    @upFavorite="upFavorite"
                    @upMarkSupplier="upMarkSupplier">
                </product-list>
            </view>
            <view v-else class="search-point">
                <view class="search-point-item" v-if="hotKeys && hotKeys.length > 0">
                    <view class="search-point-item-title">
                        <text class="title-text">热门搜索</text>
                    </view>
                    <view class="key-items">
                        <text class="key-item" v-for="(item, index) in hotKeys" :key="index">{{ item }}</text>
                    </view>
                </view>
                <view class="search-point-item">
                    <view class="search-point-item-title">
                        <text class="title-text">最近搜索</text>
                        <iconsfont
                            customIcons="icon-shanchu"
                            class="icon-del"
                            :color="'#666666'"
                            size="30"
                            @click="clearFn"></iconsfont>
                    </view>
                    <view class="key-items" v-if="historyKeys && historyKeys.length > 0">
                        <text
                            class="key-item"
                            v-for="(item, index) in historyKeys"
                            :key="index"
                            @click="useKeyFn(item)"
                            >{{ item }}</text
                        >
                    </view>
                    <view v-else>
                        <text class="empty-text">暂无搜索内容</text>
                    </view>
                </view>
            </view>
        </view>
        <uni-popup type="bottom" ref="popSku" @change="skuChange">
            <!-- <product-spec v-if="showPopSku" :data="optPopup.data" :fresh="optPopup.change"
				:popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" 
				:tempType="0"  @addBatch="addBatch"
				@setCarListFunc="setCarListFunc" >
			</product-spec> -->
            <product-spec
                v-if="showPopSku"
                :data="optPopup.data"
                :fresh="optPopup.change"
                :popup-type="optPopup.type"
                @closePopup="closePopup"
                @addCart="addCart"
                @addBatch="addBatch"
                @setCarListFunc="setCarListFunc">
            </product-spec>
        </uni-popup>
        <view class="bottom-bar" v-if="showResult">
            <view class="go-cart-bar" v-if="total">
                <view class="go-cart-bar-left">
                    <view>
                        <text class="total-text-label">合计：</text>
                        <text class="total-text-price">{{ total.totalPrice }}</text>
                        <text class="total-text-price-unit">元</text>
                    </view>
                    <text class="total-amount-text">共{{ total.totalSpace }}种商品</text>
                </view>
                <view class="go-cart-bar-right">
                    <view class="btn-cart" @click="goCart">
                        <view class="cart-num">
                            <iconsfont customIcons="icon-gouwuche1" :color="'#ffffff'" size="30"></iconsfont>
                        </view>
                        <text class="cart-text">购物车</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import searchBar from "@/components/common/search-bar.vue"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import storage from "@/uni-sub-base/utils/storage.js"
import productList from "@/pages_supplier/components/product/search-product-list.vue"
import productSpec from "@/pages_supplier/components/product/product-spec.vue"
import { getProductDisplay } from "@/utils/appInit.js"
import { getSupplierCarList } from "@/utils/cartUtil.js"
import { getSupplierCartTotal } from "@/utils/cartUtil.js"

import { eventBus } from "@/utils/eventBus.js"
export default {
    components: {
        searchBar,
        productList,
        productSpec,
    },
    data() {
        return {
            config: {
                title: "搜索",
                back: true,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            loadOk: false,
            listHeight: "",
            showResult: false,
            historyKeys: [],
            hotKeys: [],
            actions: [
                {
                    type: "搜索",
                    id: 1,
                    isTextType: true,
                    iconType: 0,
                },
            ],
            requestData: {
                ProductType: 1,
                infoType: 0,
                isPromotion: false,
                search: "",
                typePath: "_0_2_",
            },
            displayData: {},
            showPopSku: false,
            // sku 商品规格弹窗
            optPopup: {
                data: {},
                type: "",
                change: false,
                show: true,
            },
            total: null,

            isHideProImg: false,
            showCartBtn: true,
        }
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
    },
    mounted() {
        this.getHistoryKeys()
        this.GetProductDisplay()
        this.getListHeight()
        eventBus.$on("SET_CART", (msg) => {
            this.getCartNum(msg)
        })
    },
    onLoad(e) {},
    methods: {
        //获取购物车总数
        getCartNum(msg) {
            getSupplierCartTotal(msg, (res) => {
                this.total = res
            })
        },
        setCarListFunc() {
            this.$forceUpdate()
        },
        addCart(e) {
            this.$refs.popSku.close()
            this.upMarkSupplier()
        },
        //更新购物袋
        upMarkSupplier() {
            getSupplierCarList().then((res) => {})
        },
        getHistoryKeys() {
            let historyKeys = storage.getCache("historyKeys")
            if (historyKeys && historyKeys.length > 0) {
                this.historyKeys = historyKeys
            } else {
                this.historyKeys = []
            }
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e - 65 + "px"
                this.loadOk = true
            })
        },
        checkIsIn(key, keys) {
            let result = keys.find((e) => {
                return e == key
            })
            return result
        },
        actionFn(e) {
            if (e.id == 1) {
                //搜索
                let key = this.$refs.searchBar.getValue()
                if (key) {
                    let keys = storage.getCache("historyKeys")
                    if (!keys) {
                        keys = []
                    } else if (this.checkIsIn(key, keys)) {
                        //TODO 存在相同
                        keys = keys.filter((e) => {
                            return e != key
                        })
                    } else if (keys.length >= this.getAppSet().searchHistoryMax) {
                        keys.pop()
                    }

                    keys.unshift(key)
                    storage.setCache("historyKeys", keys)
                    this.showResult = true
                    //搜索商品
                    this.requestData.search = key
                    setTimeout((e) => {
                        this.$refs.productList.refresh(this.requestData)
                    }, 500)
                } else {
                    this.requestData.search = ""
                    this.getHistoryKeys()
                    this.showResult = false
                }
            }
        },
        clearFn() {
            storage.removeCache("historyKeys")
            this.getHistoryKeys()
        },
        // 获取整体显示设置
        GetProductDisplay() {
            getProductDisplay().then((res) => {
                if (res) {
                    this.displayData = res.Data
                }
            })
        },
        useKeyFn(key) {
            this.$refs.searchBar.setValue(key)
        },
        skuChange(e) {
            if (!e.show) {
                this.showPopSku = false
            }
        },
        sku(item) {
            this.showPopSku = true
            this.optPopup.type = "attr"
            this.optPopup.data = item
            this.$refs.popSku.open()
        },
        closePopup() {
            this.$refs.popSku.close()
        },
        addBatch(e) {
            this.$refs.popSku.close()
            this.$refs.popBatch.open()
        },
        goCart() {
            this.easyGoTo("/pages/supplier/cart/cartTemp")
        },
    },
}
</script>

<style lang="scss">
page {
    background: $color-white;
}
.search-point {
    display: flex;
    flex-direction: column;
    .search-point-item {
        display: flex;
        flex-direction: column;
        padding: $app-page-padding;
        .search-point-item-title {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 24rpx;
            .title-text {
                flex: 1;
                font-size: $font-size-28;
                font-weight: bold;
            }
        }
        .key-items {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .key-item {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: $font-size-28;
                margin-bottom: $app-page-padding;
                margin-right: $app-page-padding;
                padding: 12rpx 24rpx;
                border-radius: 60rpx;
                background: #f8f8f8;
            }
        }
    }
    .empty-text {
        color: $app-color-text-tip;
    }
}
.reuslt {
    background: $uni-bg-color-grey;
}
.bottom-bar {
    justify-content: flex-start;
}
.go-cart-bar {
    display: flex;
    flex-direction: row;
    flex: 1;
    .go-cart-bar-left {
        display: flex;
        flex-direction: column;
        flex: 1;
        .total-text-label {
            font-size: $font-size-24;
        }
        .total-text-price {
            font-size: $font-size-36;
            color: $app-color-main;
            margin-right: 4rpx;
        }
        .total-text-price-unit {
            font-size: $font-size-28;
        }
    }
    .total-amount-text {
        color: $app-color-text-tip;
    }
    .btn-cart {
        width: 272rpx;
        background: $app-color-main;
        height: 80rpx;
        border-radius: 80rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .cart-num {
            padding-bottom: 6rpx;
        }
        .cart-text {
            margin-left: 12rpx;
            color: $color-white;
        }
    }
}
</style>
